<template>
	<view class="indexPage">
		<view class="firstPage" v-if="!pageFirst">
			<image class="img" mode="scaleToFill" src="../../static/logo.png"></image>
		</view>
		
		<!-- #ifdef APP-PLUS -->
		<view style="height: 35px; background-color:#39A6FF;"></view>
		<!-- #endif -->
		
		<view class="pageH1">
			法医检验鉴定标准
		</view>
		<view class="searchBox" @click="goSearch">
			<uni-icons type="search" color="#666" size="24"></uni-icons>
            <text class="text">搜索</text>
		</view>
		
		<view class="pageContainer">
			<view class="nav">
				
				
				
				<view class="item" @click="goList(0)">
					<image class="img" mode="aspectFit" src="../../static/index/icon1.png"></image>
					<view class="text">法医临床</view>
				</view>
				<view class="item" @click="goList(1)">
					<image class="img" mode="aspectFit" src="../../static/index/icon2.png"></image>
					<view class="text">法医病理</view>
				</view>
				<view class="item" @click="goList(2)">
					<image class="img" mode="aspectFit" src="../../static/index/icon3.png"></image>
					<view class="text">法医物证</view>
				</view>
				<view class="item" @click="goList(3)">
					<image class="img" mode="aspectFit" src="../../static/index/icon4.png"></image>
					<view class="text">法医毒物</view>
				</view>
				<view class="item" @click="goList(4)">
					<image class="img" mode="aspectFit" src="../../static/index/icon5.png"></image>
					<view class="text">法医精神病</view>
				</view>
			</view>
			
			<view class="banner">
				<image class="img" mode="widthFix" src="../../static/index/banner.png"></image>
			</view>
			
		</view>
		
		<view class="pageList">
			<view class="title">
				<view class="line"></view>
				<view class="text">常用标准</view>
			</view>
			
			<view class="listBox">
				<view class="item" v-for="(item, index) in dataList" :key="item.id" @click="goDetail(item)">
					<view class="subTitle">
						<text class="tips">[{{item.category}}]</text>
						<text class="text" v-html="item.title"></text>
					</view>
					<view class="desc">
						<view style="flex: 3;" class="lineBreak">{{item.publishDept}}</view>
						<view style="flex: 3; text-align: right;">{{item.publishWordSize}}</view>
					</view>
				</view>
			</view>
			
			<view v-if='!onLoading && dataList.length == 0 && pageFirst' class="placeText" style="padding-top: 20px;">
				暂无记录！
			</view>
		</view>
		

		<pageTabbar :page="1"></pageTabbar> 
	</view>
</template>
<script>
	import {
		APIJS
	} from '../../api/api.js'
	import pageTabbar from '../../components/pageTabbar.vue'
	import {
		goLogin
	} from '@/utils/utils.js'
	let pageConfig = 0

	export default {
		components: {
			pageTabbar
		},
		data() {
			return {
				formData: {
					pageIndex: 1,
					pageSize: 20,
					total: 0
				},
				dataList: [],
				array: [],
				index: 0,
				noMore: false,
				onLoading: false,
				pageFirst: false,
				navList: {
					0: "法医临床",
					1: "法医病理",
					2: "法医物证(DNA)",
					3: "法医毒物",
					4: "法医精神病"
				}
			}
		},
		onLoad() {},
		onPullDownRefresh() {
			this.onRefresh().then(() => {
				uni.stopPullDownRefresh();
			})
		},
		onReachBottom() {
			this.lowerBottom()
		},
		mounted() {
			let vm = this
			let platInfo = uni.getDeviceInfo()
			let hasPageFirst = uni.getStorageSync('hasPageFirst') || 0
			if (hasPageFirst == 0) {
				setTimeout(() => {
					vm.pageFirst = true
					uni.setStorageSync('hasPageFirst', 1)
				}, 1500)
			} else {
				vm.pageFirst = true
			}
			this.pageInit()
		},

		methods: {
			pageInit() {
				let vm = this
				APIJS.getCategoryList({}).then((res) => {
					vm.array = res.data
					vm.getList().then(() => {})
				}).catch((e) => {
					setTimeout(() => {
						goLogin('/')
					}, 600)
				})
			},

			goDetail(item) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${item.id}`
				});
			},
			goSearch(item) {
				uni.navigateTo({
					url: `/pages/search/search`
				});
			},
			goList(type) {
				uni.navigateTo({
					url: `/pages/list/index?type=${type}`
				});
			},
			getList(category) {
				let vm = this
				vm.onLoading = true
				return new Promise((reslove) => {
					let params = {
						category: '',
						pageIndex: vm.formData.pageIndex,
						pageSize: vm.formData.pageSize,
						searchKey: ''
					}

					APIJS.getStandardContentList(params).then((res) => {
						vm.dataList = [...vm.dataList, ...res.data]
						vm.formData.total = res.count
						vm.onLoading = false
						reslove()
					}).catch((e) => {
						setTimeout(() => {
							goLogin('/')
							uni.stopPullDownRefresh();
						}, 600)
					})
				})
			},

			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e
				this.onRefresh()
			},
			// 上拉刷新
			onRefresh() {
				let vm = this
				return new Promise((reslove) => {
					vm.dataList = []
					vm.formData.pageIndex = 1
					vm.getList().then((res) => {
						reslove()
					})
				})

			},


			// 下拉加载更多
			lowerBottom() {
				// console.log('lowerBottom')
				let vm = this
				if (vm.formData.total > vm.formData.pageIndex * vm.formData.pageSize) {
					vm.formData.pageIndex++
					vm.getList()
				} else {
					// vm.noMore = true
				}
			},


		}
	}
</script>

<style lang="less">
	// /deep/.uni-scroll-view-refresh-inner>svg {
	// 	fill: #39A6FF !important;
	// }

	// /deep/.uni-scroll-view-refresh__spinner>circle {
	// 	color: #39A6FF !important;
	// }
</style>
<style scoped lang="less">
	.firstPage {
		position: fixed;
		background: url(../../static/pageBg.jpg) repeat-y; background-size: 100% auto;
		width: 100vw;
		height: 100vh;
		left: 0;
		right: 0;
		z-index: 999999;
		display: flex; align-items: center; justify-content: center;
		.img {
			display: block;
			width: 200rpx;
			height: 200rpx;
		}
	}
	
	.indexPage{
		background: url('../../static/index/bg.png') no-repeat top center #f1f1f1; background-size: 100% auto; padding-bottom: 20px;
		
		.pageH1{
			font-size: 18px; color: #fff; text-align: center; line-height: 52px; 
		}
		
		.searchBox{
			margin: 0px 20px 0; background-color: #fff; height: 38px; border-radius: 5px; display: flex;
			 align-items: center; padding-left: 10px;
			.text{
				color: #666; padding-left: 10px; font-size: 16px; margin-top: -2px;
			}
		}
		.pageContainer{
			margin-top: 15px; border-radius: 16px 16px 0 0; background-color: #fff; 
			.nav{
				display: flex;  padding: 15px 10px;
				.item{
					flex: 1; text-align: center; 
					.img{
						display: block; width: 54px; height: 54px; margin: 0 auto;
					}
					.text{
						font-size: 13px; padding-top: 10px; color: #333;
					}
				}
			}
			.banner{
				padding: 0px 15px 15px;
				.img{
					display: block; width: 100%;
				}
			}
		}
		
		.pageList{
			margin-top: 15px;  background-color: #fff; padding: 0 15px 20px;
			.title{
				display: flex; align-items: center; height: 50px; border-bottom: 1px solid #e1e1e1;
				.line{ height: 16px; width: 6px; background-color: #39A6FF; border-radius: 3px;}
				.text{ font-size: 18px; padding-left: 10px;}
			}
			
			
			
			
		}
	}


	.listBox {
	
		.item {
			border-bottom: 1px solid #ebeef5;
			padding: 10px 0px;
			.subTitle{
				line-height: 22px; color: #333;
				font-size: 16px;
				.tips{
					color: #39A6FF;
				}
			}
			.desc{
				display: flex; color: #999; padding-top: 5px;
				font-size: 12px;
				align-items: center; gap: 10px;
				justify-content: space-between;
			}

			&:active {
				background-color: #f5f5f5;
			}

			.text {
				flex: 1;
				padding-right: 10px;
			}

			.icon {
				width: auto;
			}
		}
	}


	.placeText {
		text-align: center;
		line-height: 40px;
		font-size: 14px;
	}


	.lineBreak {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;

		text-overflow: ellipsis;
	}
</style>